import React, { Suspense } from 'react'
import { useRoutes } from 'react-router-dom'
// 引入组件 通过懒加载形式
const Home = React.lazy(() => import('../views/home'))
const ListAdd = React.lazy(() => import('../views/listAdd'))
const ListManage = React.lazy(() => import('../views/listManage'))
const ListQuery = React.lazy(() => import('../views/listQuery'))
const RecommentList = React.lazy(() => import('../views/recommendList'))
const RecommendManage = React.lazy(() => import('../views/recommendManage'))
const Set = React.lazy(() => import('../views/set'))
const Login = React.lazy(() => import('../views/login'))
const MainLayout = React.lazy(() => import('../views/mainLayout'))

export const MENU_ROUTER_LIST = [
  {
    path: '/',
    element: <Home></Home>,
    meta: { title: '首页' }
  },
  {
    path: '/list',
    meta: { title: '列表操作' },
    children: [{
      path: '/list/add',
      element: <ListAdd></ListAdd>,
      meta: {
        title: '列表添加'
      }
    }, {
      path: '/list/manage',
      element: <ListManage></ListManage>,
      meta: {
        title: '列表管理'
      }
    }, {
      path: '/list/query',
      element: <ListQuery></ListQuery>,
      meta: {
        title: '列表查询'
      }
    }]
  },
  {
    path: '/recommend',
    meta: { title: '记录操作' },
    children: [{
      path: '/recommend/list',
      element: <RecommentList></RecommentList>,
      meta: {
        title: '记录列表'
      }
    },{
      path: '/recommend/manage',
      element: <RecommendManage></RecommendManage>,
      meta: {
        title: '记录管理'
      }
    }]
  },
  {
    path: '/set',
    element: <Set></Set>,
    meta: { title: '设置', roles: ['admin'] }
  }
]


// 一级 路由表
const ROUTER_LIST = [{
  path: '/',
  element: <MainLayout></MainLayout>,
  children: MENU_ROUTER_LIST
}, {
  path: '/login',
  element: <Login></Login>
}]


const Router = () => {
  const RouterView = () => useRoutes(ROUTER_LIST);
  return (
    <Suspense fallback={<div>路由加载中....</div>}>
      <RouterView></RouterView>
    </Suspense>
  )
}

export default Router